import React from 'react';
import '@/views/Login/Login.scss'
import service from '../../api/index'
import { Button, Form, Input, message } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router-dom";
import { useDispatch } from 'react-redux'


interface Props {

}

function Login(props: Props) {

    let navigate = useNavigate()
    let dispatch = useDispatch()
    // 表单验证通过时执行
    let onFinish = async (formvalues: any) => {
        // console.log(formvalues);
        let res = await service.admin.admin_login(formvalues)
        // console.log(res.data);
        if (res.data.code == '200') {
            message.success({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })
            localStorage.setItem('token', res.data.data.token)
            dispatch({ type: 'SAVE_TOKEN', payload: res.data.data.token })
            dispatch({ type: 'SAVE_ADMINNAME', payload: res.data.data.adminname })
            navigate('/index/home')
        } else {
            message.error({
                content: res.data.message,
                style: {
                    marginTop: '20vh',
                },
            })

        }


    }
    // 表单验证失败时执行
    let onFinishFailed = (formvalues: any) => {
        console.log(formvalues);
    }
    // 账号的校验
    let userValidator = (rule: any, value: string, callback: any) => {
        // if (/^1[3-9]\d{9}$/.test(value)) {
        if (value) {
            callback()
        } else {
            callback(new Error('请输入正确的手机号！'))
        }
    }

    // 密码的校验
    let passValidator = (rule: any, value: string, callback: any) => {
        if (/^[1-9]{6}$/) {
            callback()
        } else {
            callback(new Error('请输入六位均是数字的密码！'))
        }
    }

    return (
        <div className='login'>
            <Form
                className="login-form"
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}

            >
                <Form.Item
                    name="adminname"
                    rules={[{
                        required: true,
                        validator: userValidator, 
                        message: '请输入用户名'
                    }]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Adminname" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{
                        required: true,
                        validator: passValidator,
                        message: '请输入六位数字密码'
                    }]}
                >
                    <Input.Password
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        placeholder="Password"
                    />
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;